<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第9节课</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
		     * 将边框设置在中间
		     */
				align-items: center;
				justify-content: center;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	<body>
		<!-- <img src="../img/img.png" id="img"> -->
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
		</div>
	</body>
	<script>
		window.onload = function() {
			let yCanvas = document.getElementById('canvas');
			console.dir(yCanvas);
			let yPen = yCanvas.getContext("2d")
			//开始点坐标、结束点坐标;
			//createLinearGradient(x1,y1,x2,y2)
			//addColorStop(value1,color1);
			//addColorStop(value2,color2);

			// var yJb = yPen.createLinearGradient(0, 250, 500, 250);
			// yJb.addColorStop(1, "green");
			// yJb.addColorStop(0.6, "pink");
			// yJb.addColorStop(0.2, "yellow");
			// yPen.fillStyle = yJb;

			// yPen.fillRect(0, 0, 500, 500);

			// yPen.font = "100px bold";
			// yPen.fillText("我爱学习",100, 100)
			
			//角度渐变
			//开始渐变的点的坐标，半径，渐变结束时圆心的坐标，结束时的半径
			//createRadicaldient(x1,y1,r,x2,y2,r2);
			
			// var yJb =yPen.createRadialGradient(100,60,10,80,80,50);
			// yJb.addColorStop(0,"white");
			// yJb.addColorStop(0.9,"orange");
			// yJb.addColorStop(1,"rgba(0,0,0,0)");
			// yPen.fillStyle=yJb;
			// yPen.arc(80,80,50,0,Math.PI/180*360,true);
			// yPen.fill();
			
			//阴影
			//偏移方向X轴、Y轴方向
			//shadowOffsetX/shadowOffsetY
			//阴影的颜色
			//shadowColor
			//模糊程度越大越迷糊
			//shadowBlur
			yPen.shadowBlur=20;
			yPen.shadowOffsetX =0;
			yPen.shadowOffsetY =0;
			yPen.fillStyle="purple";
			yPen.shadowColor="orchid";
			yPen.fillRect(100,100,100,100);
			yPen.fillText("我爱学习",300,300)
		}
	</script>
</html>
